<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screen Share</title>
</head>
<body>
<button onclick="createOffer()">点击开始共享</button>

当前共享的区域: <br>
<video id="localVideo" autoplay width="50%" height="auto"></video>

<br>
ANSWER: <br>
<textarea id="answer" onchange="setAnswer()"></textarea>
<br>
ANSWER CANDIDATE: <br>
<textarea id="answer_candidate" onchange="setAnswerCandidate()"></textarea>
远程共享的区域: <br>
<video id="remoteVideo" autoplay width="50%" height="auto"></video>

<script>
    // 0. websocket 连接和监听
    // 1. 创建 PC
    // 2. 获取流
    // 3. 流添加到PC，创建 offer
    // 4. 监听 stream

    const roomIdentity = '123456';
    const userIdentity = 'offer';
    let ws = new WebSocket('ws://127.0.0.1:8080/ws/p2p/'+roomIdentity+'/' +userIdentity)

    // {
    //     'user_identity': 'offer',
    //     'room_identity': '123456,
    //     'key': 'sdp',
    //     'value': 'any'
    // }

    ws.addEventListener('message', (event) => {
        console.log(event.data)
        let data = JSON.parse(event.data)
        // sdp
        if (data.key === 'answer_sdp' && data.user_identity !== userIdentity) {
            pc.setRemoteDescription(data.value);
        }
        // candidate
        if (data.key === 'answer_candidate' && data.user_identity !== userIdentity) {
            pc.addIceCandidate(data.value);
        }
    })

    let pc = new RTCPeerConnection();

    // 远程流
    pc.onaddstream = function (e) {
        document.getElementById('remoteVideo').srcObject = e.stream;
    };

    // 候选者
    pc.onicecandidate = function (e) {
        if (e.candidate) {
            console.log('offer candidate', JSON.stringify(e.candidate));
            ws.send(JSON.stringify({
                'user_identity': userIdentity,
                'room_identity': roomIdentity,
                'key': 'offer_candidate',
                'value': e.candidate
            }))
        }
    };

    function createOffer() {
        navigator.mediaDevices.getDisplayMedia().then(stream => {
            document.getElementById('localVideo').srcObject = stream;

            stream.getTracks().forEach(track => {
                pc.addTrack(track, stream);
            });

            pc.createOffer().then(offer => {
                console.log('offer', JSON.stringify(offer.sdp));
                ws.send(JSON.stringify({
                    'user_identity': userIdentity,
                    'room_identity': roomIdentity,
                    'key': 'offer_sdp',
                    'value': offer
                }));
                pc.setLocalDescription(offer);
            });
        })
    }

    function setAnswer() {
        let answer = JSON.parse(document.getElementById('answer').value);
        pc.setRemoteDescription({'type': 'answer', 'sdp': answer});
    }

    function setAnswerCandidate() {
        let answerCandidate = JSON.parse(document.getElementById('answer_candidate').value);
        pc.addIceCandidate(answerCandidate);
    }
</script>
</body>
</html>